<template>
  <div class="video-single" ref="videoSingle">
    <video :id="dataId" width="100%" height="100%" class="video-js vjs-default-skin avatar" controls>
      <source :src="dataSrc" type="application/x-mpegURL" />
    </video>
  </div>
</template>

<script>
import videojs from 'video.js/dist/video.min'
import 'video.js/dist/video-js.min.css'
import 'videojs-contrib-hls'
export default {
  name: 'cvuePlayer',
  props: {
    dataId: {
      type: String,
      default: 'example-video'
    },
    dataSrc: {
      type: String,
      default: ''
    }
  },
  data () {
    return {     
      videoObj: [
        {
          'index': 0,
          'url': 'https://filetest.uda-edu.com:30001/10d19ca9c6484508a9e025e97942fb35.m3u8'
        },
        {
          'index': 1,
          'url': 'http://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8'
        }
      ],
      options: {
        bigPlayButton: true,
        textTrackDisplay: false,
        posterImage: false,
        errorDisplay: false,
        controlBar: false
      },
      tableData: [],
      player: null
    }
  },
  mounted () {
    this.initPlayer()
  },
  methods: {
    initPlayer () {
      videojs(this.dataId).dispose()
      this.player = null
      this.$refs.videoSingle.innerHTML = ''
      var html = ''
          html += '<video id="'+this.dataId+'" width="100%" height="100%" class="video-js vjs-default-skin avatar" controls>'
          html += '<source src="'+this.dataSrc+'" type="application/x-mpegURL" />'
          html += '</video>'
      this.$refs.videoSingle.innerHTML = html
      this.player = videojs(this.dataId, this.options)
    },  
    initPlayerArr () {
      var playerArr = []
      for (var i = 0; i < this.tableData.length; i++) {
        if (playerArr[i]) {
          playerArr[i].dispose()
          playerArr[i] = null
        }
        playerArr[i] = videojs('video' + i, this.options)
      }
    },
    changeSource (url) {
      var storySources = [
        {
          type: 'application/x-mpegURL',
          src: url
        }
      ]
      this.player.src(storySources)
      this.player.play()       
    }
  }
}
</script>

<style lang="scss">
.video-single{
  width: 100%;
  height: 100%;
  .video-js{
    width: 100%;
    height: 100%;
  }
}
</style>
